<template>
  <div>
    <yt-crud
      ref="crudRef"
      :data="list"
      :column="column"
      v-model:page="queryParams"
      v-model:query="queryParams"
      :total="state.total"
      :loading="state.loading"
      :tableProps="{
        selection: true,
        viewBtn: true,
        delBtn: true,
        customTable: false,
        menuSlot: true,
        menuWidth: 200
      }"
      :fun-props="{
        addBtn: true,
        delBtn: true,
        exportBtn: true
      }"
      :addFunc="handleAdd"
      @del-fun="handleDelete"
      @export-fun="handleExport"
      @on-load="getList"
    >
      <template #imageAddress="{ row }">
        <el-image 
          v-if="row.imageAddress" 
          :src="row.imageAddress" 
          class="h-30px w-30px" 
          :preview-src-list="[row.imageAddress]"
          preview-teleported
        />
        <span v-else>暂无图片</span>
      </template>
    </yt-crud>
  </div>
</template>

<script setup lang="ts">
import { SpApi, SpVO } from '@/api/eiot/sp'
import download from '@/utils/download'
import { IColumn } from '@/components/common/types/tableCommon'

/** SP表 列表 */
defineOptions({ name: 'EiotSp' })

const message = useMessage() // 消息弹窗

const list = ref<SpVO[]>([]) // 列表的数据

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  description: undefined,
  status: undefined,
  spNumber: undefined,
  cgqNumber: undefined,
  createTime: []
})

const state = reactive({
  total: 0,
  loading: false
})

/** 查询列表 */
const getList = async () => {
  state.loading = true
  try {
    const data = await SpApi.getSpPage(queryParams)
    list.value = data.list
    state.total = data.total
  } finally {
    state.loading = false
  }
}

const column = ref<IColumn[]>([
  {
    label: '编号',
    key: 'id',
    tableWidth: 80,
    editDisabled: true,
    addDisabled: true
  },
  {
    label: '名称',
    key: 'name',
    search: true,
    rules: [{ required: true, message: '名称不能为空' }]
  },
  {
    label: '描述',
    key: 'description',
    search: true,
    type: 'textarea'
  },
  {
    label: '图片地址',
    key: 'imageAddress',
    type: 'UploadImg',
    componentProps: {
      limit: 1
    },
    slot: true
  },
  {
    label: '视频编号',
    key: 'spNumber',
    search: true
  },
  {
    label: '传感器编号',
    key: 'cgqNumber',
    search: true
  },
  {
    label: '状态',
    key: 'status',
    type: 'select',
    componentProps: {
      options: [
        { label: '启用', value: 0 },
        { label: '禁用', value: 1 }
      ]
    }
  },
  {
    label: '创建时间',
    key: 'createTime',
    type: 'date',
    tableWidth: 180,
    formHide: true
  },
  {
    label: '更新时间',
    key: 'updateTime',
    type: 'date',
    tableWidth: 180,
    formHide: true
  }
])

/** 添加操作 */
const handleAdd = async (row: SpVO, close: () => void) => {
  try {
    await SpApi.createSp(row)
    message.success('添加成功')
    close()
    getList()
  } catch (err) {
    message.error((err as any).msg || '添加失败')
  }
}

/** 删除操作 */
const handleDelete = async (row: SpVO) => {
  try {
    await SpApi.deleteSp(row.id!)
    message.success('删除成功')
    getList()
  } catch (err) {
    message.error((err as any).msg || '删除失败')
  }
}

/** 导出操作 */
const handleExport = async () => {
  try {
    const data = await SpApi.exportSp(queryParams)
    download.excel(data, 'SP表.xls')
  } catch (err) {
    message.error((err as any).msg || '导出失败')
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>